<script setup>
import HomePanel from "@/views/home/components/HomePanel.vue";
import { onMounted, ref } from "vue";
const menu = ref({
  title: '挡墙工程',
  subtitle: "共计95段,完成11段",
  blueprint: "设计施工图",
  boq: "工程量清单",
  quantity: "工程量",
  construction_method_statement: "施工方案",
  technical_information: "技术质检资料",
  construction_record: "施工记录",
  product_quality: "质量",
  production_safety: "安全",
  construction_progress: "进度",
  labor: "人工",
  materials: "材料",
  machinery_equipment: "机械"
});
const list = ref([]);
const picture=ref("./logo.svg")
const getList = () => {
  /*const res= getPileAPI()*/
  console.log("home list");
};
onMounted(() => {
  getList();
});
</script>

<template>
  <HomePanel :title="menu.title" :subtitle="menu.subtitle">
    <ul class="list">
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.blueprint }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.boq }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.quantity }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.construction_method_statement }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.technical_information }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.construction_record }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.product_quality }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.production_safety }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.construction_progress }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.labor }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.materials }}
      </li>
      <li class="small">
        <img v-img-lazy="picture" alt="" />
        {{ menu.machinery_equipment }}
      </li>
    </ul>
  </HomePanel>
</template>

<style scoped>
.list {
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; /* 设置列表项之间的间距 */
}

.small {
  padding: 0.5rem;
  color: #3c0f0f;
  width: 220px;
  height: 220px;
  background-color: #f0f9f4;
  transition: all 0.5s;
}

.small:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
}

.small img {
  width: 106px;
  height: 106px;
}

.small p {
  font-size: 22px;
  padding-top: 12px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.small .num {
  color: #3c0f0f;
}
</style>